<template>
  <div class="bgrdcolor">
    <div class="liststyle">
      <div class="contract_line" v-for="(item,index) in itemList" :key="index">
        <div class="contract_header">
          <h3 class="contract_name">{{item.ctname}}</h3>
        </div>
        <div class="border_line" v-for="(it,idx) in item.bodys" :key="idx">
          <van-card :desc="it.materialspec" :price="it.showPrice" :title="it.materialname">
            <template #footer>
              <van-stepper
                v-model.number="it.num"
                min="0"
                integer
                @plus="onPlus(it)"
                @minus="onMinus(it)"
                @blur="onBlur(it)"
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <div>
      <van-submit-bar :price="commitPirce" button-text="提交订单" @submit="onSubmit">
        <van-button round type="info" color="red" size="small" @click="onBack">返回</van-button>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [],
      totalPrice: 0,
      commitPirce: 0,
      contracts: [],
    };
  },
  mounted() {
    this.contracts = this.$route.query.contracts;
    this.onGetItemList();
  },
  methods: {
    onSubmit() {
      console.log("111");
    },
    onPlus(it) {
      it.num++;
      this.totalPrice = this.totalPrice + Number(it.nprice);
      this.commitPirce = Math.abs(this.totalPrice);
    },
    onMinus(it) {
      it.num--;
      this.totalPrice = this.totalPrice - Number(it.nprice);
      this.commitPirce = Math.abs(this.totalPrice);
    },
    onBlur(it) {
      this.totalPrice = 0;
      this.itemList.forEach((item, index) => {
        item.bodys.forEach((it, idx) => {
          this.totalPrice += Number(it.nprice) * it.num;
        });
      });
      this.commitPirce = Math.abs(this.totalPrice);
    },
    onSubmit() {
      if (this.commitPirce === 0) {
        this.$dialog
          .alert({
            message: "请选择您购买的商品数量后再次提交",
            theme: "round-button",
          })
          .then(() => {
            // on close
          });
      }
    },
    onBack() {
      this.$router.go(-1);
    },
    onGetItemList() {
      this.$axios
        .request({
          url: "/api/contract/material-list",
          method: "post",
          headers: { "content-type": "application/x-www-form-urlencoded" },
          data: {
            vbillcode: this.contracts,
          },
        })
        .then((res) => {
          this.itemList = res.data.data.result;
          this.itemList.forEach((item, index) => {
            item.bodys.forEach((it, idx) => {
              it.num = 0;
              it.showPrice = it.nprice / 100;
            });
          });
          console.log("获取产品列表返回信息：");
          console.log(this.itemList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  color: #323233;
  font-size: 12px;
  background-color: white;
}

.van-card__price {
  display: inline-block;
  color: red;
  font-weight: 500;
  font-size: 12px;
}

.van-card__title {
  max-height: 32px;
  font-weight: 800;
  line-height: 25px;
  font-size: 14px;
}

.van-card__desc {
  max-height: 20px;
  color: #646566;
  line-height: 20px;
  width: 250px;
}

.van-card__footer .van-button {
  margin-left: -4px;
}

.van-button--small {
  height: 25px;
  padding: 0 8px;
  font-size: 12px;
}

.contract_header {
  height: 30px;
  text-align: left;
  padding: 0 0 0 10px;
  background-color: white;
}

.contract_name {
  margin: 0 0 0 0px;
}

.contract_line {
  border-bottom: 5px solid #f2f3f4;
}

.t_border {
  border: 1px solid red;
}

.liststyle {
  padding: 5px;
  margin-bottom: 45px;
}

.border_line {
  margin-bottom: 1px;
}

.bgrdcolor {
  background-color: #f2f3f4;
}

.van-card__price-integer {
  font-size: 25px;
  font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
}

.van-card__price {
  display: inline-block;
  color: red;
  font-weight: 500;
  font-size: 15px;
}
</style>